<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>DB2DOC</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css"/>
    <style>
        textarea {
            font: normal 12px/18px "Lucida Grande", Verdana;
            padding: 3px;
            border: 1px solid #ddd;
            width: 300px;
            height: 100px;
            max-width: 300px;
            max-height: 100px;
        }

        .modal p {
            margin: 1em 0;
        }

        .add_form.modal {
            border-radius: 0;
            line-height: 18px;
            padding: 0;
            font-family: "Lucida Grande", Verdana, sans-serif;
        }

        .add_form.modal p {
            padding: 20px 30px;
            border-bottom: 1px solid #ddd;
            margin: 0;
            background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(1, #fff));
            overflow: hidden;
        }

        .add_form.modal p:last-child {
            border: none;
        }

        .add_form.modal p label {
            float: left;
            font-weight: bold;
            color: #333;
            font-size: 13px;
            width: 110px;
            line-height: 22px;
        }

        .add_form.modal p input[type="text"],
        .add_form.modal p input[type="submit"] {
            font: normal 12px/18px "Lucida Grande", Verdana;
            padding: 3px;
            border: 1px solid #ddd;
            width: 200px;
        }

        #msg {
            margin: 10px;
            padding: 30px;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            background: -moz-linear-gradient(top, #2e5764, #1e3d47);
            background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1e3d47), color-stop(1, #2e5764));
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON('/conn', function (json) {
                let tr = [];
                let data = json.data
                for (let i = 0; i < data.length; i++) {
                    tr.push('<tr>');
                    tr.push('<td>' + data[i].id + '</td>');
                    tr.push('<td>' + data[i].name + '</td>');
                    tr.push('<td>' + data[i].driver + '</td>');
                    tr.push('<td style="width:200px">' + data[i].url + '</td>');
                    tr.push('<td>' + data[i].username + '</td>');
                    tr.push('<td>' + data[i].password + '</td>');
                    tr.push('<td><button class=\'test\' id=' + data[i].id + '>测试连接</button>&nbsp;&nbsp;');
                    tr.push('<button class=\'edit\' id=' + data[i].id + '>修改</button>&nbsp;&nbsp;');
                    tr.push('<button class=\'delete\' id=' + data[i].id + '>删除</button>&nbsp;&nbsp;');
                    tr.push('<button class=\'export\' id=' + data[i].id + ' type="html">导出html</button>&nbsp;&nbsp;');
                    tr.push('<button class=\'export\' id=' + data[i].id + ' type="md">导出markdown</button>&nbsp;&nbsp;');
                    tr.push('<button class=\'export\' id=' + data[i].id + ' type="doc">导出word</button></td>');
                    tr.push('</tr>');
                }
                $('table').append($(tr.join('')));
            });

            $(document).delegate('#addNew', 'click', function (event) {
                event.preventDefault();

                let name = $('#name').val();
                let driver = $('#driver').val();
                let url = $('#url').val();
                let username = $('#username').val();
                let password = $('#password').val();

                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/conn",
                    data: JSON.stringify({
                        'name': name,
                        'driver': driver,
                        'url': url,
                        'username': username,
                        'password': password
                    }),
                    cache: false,
                    success: function (result) {
                        $("#msg").html("<span style='color: green'>DBconnection added successfully</span>");
                        window.setTimeout(function () {
                            location.reload()
                        }, 1000)
                    },
                    error: function (err) {
                        $("#msg").html("<span style='color: red'>DBconnection is required</span>");
                    }
                });
            });

            $(document).delegate('.edit', 'click', function (event) {
                let parent = $(this).parent().parent();

                let id = parent.children("td:nth-child(1)").html();
                let name = parent.children("td:nth-child(2)");
                let driver = parent.children("td:nth-child(3)");
                let url = parent.children("td:nth-child(4)");
                let username = parent.children("td:nth-child(5)");
                let password = parent.children("td:nth-child(6)");
                let buttons = parent.children("td:nth-child(7)");

                name.html("<input type='text' id='name' value='" + name.html() + "'/>");
                driver.html("<input type='text' id='driver' value='" + driver.html() + "'/>");
                url.html("<textarea id='url'>" + url.html() + "</textarea>");
                username.html("<input type='text' id='username' value='" + username.html() + "'/>");
                password.html("<input type='text' id='password' value='" + password.html() + "'/>");
                let buttonsHtml = "<button class=\'test\' id='" + id + "'>测试连接</button>&nbsp;&nbsp;";
                buttonsHtml += "<button class=\'save\' id='" + id + "'>保存</button>&nbsp;&nbsp;";
                buttonsHtml += "<button class=\'delete\' id='" + id + "'>删除</button>&nbsp;&nbsp;";
                buttonsHtml += "<button class=\'export\' id='" + id + "' type=\"html\">导出html</button>&nbsp;&nbsp;";
                buttonsHtml += "<button class=\'export\' id='" + id + "' type=\"md\">导出markdown</button>&nbsp;&nbsp;";
                buttonsHtml += "<button class=\'export\' id='" + id + "' type=\"doc\">导出word</button>";
                buttons.html(buttonsHtml);
            });

            $(document).delegate('.save', 'click', function () {
                let parent = $(this).parent().parent();

                let id = parent.children("td:nth-child(1)").html();
                let name = parent.children("td:nth-child(2)");
                let driver = parent.children("td:nth-child(3)");
                let url = parent.children("td:nth-child(4)");
                let username = parent.children("td:nth-child(5)");
                let password = parent.children("td:nth-child(6)");
                let buttons = parent.children("td:nth-child(7)");

                $.ajax({
                    type: "PUT",
                    contentType: "application/json; charset=utf-8",
                    url: "/conn",
                    data: JSON.stringify({
                        'id': id,
                        'name': name.children("input[type=text]").val(),
                        'driver': driver.children("input[type=text]").val(),
                        'url': url.children("textarea[id=url]").val(),
                        'username': username.children("input[type=text]").val(),
                        'password': password.children("input[type=text]").val()
                    }),
                    cache: false,
                    success: function () {
                        name.html(name.children("input[type=text]").val());
                        driver.html(driver.children("input[type=text]").val());
                        url.html(url.children("textarea[id=url]").val());
                        username.html(username.children("input[type=text]").val());
                        password.html(password.children("input[type=text]").val());

                        let buttonsHtml = "<button class=\'test\' id='" + id + "'>测试连接</button>&nbsp;&nbsp;";
                        buttonsHtml += "<button class=\'edit\' id='" + id + "'>修改</button>&nbsp;&nbsp;";
                        buttonsHtml += "<button class=\'delete\' id='" + id + "'>删除</button>&nbsp;&nbsp;";
                        buttonsHtml += "<button class=\'export\' id='" + id + "' type=\"html\">导出html</button>&nbsp;&nbsp;";
                        buttonsHtml += "<button class=\'export\' id='" + id + "' type=\"md\">导出markdown</button>&nbsp;&nbsp;";
                        buttonsHtml += "<button class=\'export\' id='" + id + "' type=\"doc\">导出word</button>";
                        buttons.html(buttonsHtml);
                    },
                    error: function () {
                        $('#err').html('<span style=\'color:red; font-weight: bold; font-size: 30px;\'>Error updating record').fadeIn().fadeOut(4000, function () {
                            $(this).remove();
                        });
                    }
                });
            });

            $(document).delegate('.delete', 'click', function () {
                if (confirm('Do you really want to delete DBconnection?')) {
                    let id = $(this).attr('id');
                    let parent = $(this).parent().parent();
                    $.ajax({
                        type: "DELETE",
                        url: "/conn/" + id,
                        cache: false,
                        success: function () {
                            parent.fadeOut('slow', function () {
                                $(this).remove();
                            });
                            location.reload(true)
                        },
                        error: function () {
                            $('#err').html('<span style=\'color:red; font-weight: bold; font-size: 30px;\'>Error deleting DBconnection').fadeIn().fadeOut(4000, function () {
                                $(this).remove();
                            });
                        }
                    });
                }
            });

            $(document).delegate('.test', 'click', function () {
                let parent = $(this).parent().parent();
                let id = $(this).attr('id');
                $.ajax({
                    type: "POST",
                    url: "/conn/test/" + id,
                    cache: false,
                    success: function (response) {
                        alert(response.message);
                    },
                    error: function () {
                        $('#err').html('<span style=\'color:red; font-weight: bold; font-size: 30px;\'>Error connect db').fadeIn().fadeOut(4000, function () {
                            $(this).remove();
                        });
                    }
                });
            });

            $(document).delegate('.export', 'click', function () {
                let id = $(this).attr('id');
                let type = $(this).attr('type');
                $.ajax({
                    type: "POST",
                    url: "/conn/export/" + id+"?type="+type,
                    cache: false,
                    success: function (response) {
                        if(response.code == "2000"){
                            window.open(response.data, '_blank');
                        }else{
                            alert(response.message);
                        }
                    },
                    error: function () {
                        $('#err').html('<span style=\'color:red; font-weight: bold; font-size: 30px;\'>Error connect db').fadeIn().fadeOut(4000, function () {
                            $(this).remove();
                        });
                    }
                });
            });

        });
    </script>
</head>
<body>

<h2>DB2DOC</h2>

<p><a class='btn' href="#add" rel="modal:open">新增数据库连接</a></p>

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <th>Id</th>
        <th>名称</th>
        <th>驱动</th>
        <th>连接URL</th>
        <th>用户名</th>
        <th>密码</th>
        <th>操作</th>
    </tr>
</table>

<form id="add" action="#" class="add_form modal" style="display:none;">
    <div id='msg'/>
    <h3>新增数据库连接</h3>
    <p>
        <label>名称</label><input type="text" id="name" name="name">
        <label>驱动</label><input type="text" id="driver" name="driver" value="com.mysql.cj.jdbc.Driver">
        <label>连接URL</label><textarea id="url" name="url">jdbc:mysql://${ip}:${port}/${dbname}?serverTimezone=GMT&useUnicode=true&characterEncoding=UTF-8&useSSL=false&allowPublicKeyRetrieval=true</textarea>
        <label>用户名</label><input type="text" id="username" name="username">
        <label>密码</label><input type="text" id="password" name="password">
    </p>
    <p>
        <input type="submit" id="addNew" value="提交">
    </p>
</form>

</body>
</html>